<template>
	<view class="container">
		<view class="boss" >
			<swiper class="swiper" indicator-dots indicator-color autoplay interval="5000" :duration="500" circular>
					<swiper-item  class="swiper-item" v-for="(item,index) in listImg" :key="index">
						<image :src="item.url" mode="aspectFit"></image>
					</swiper-item>
			</swiper>
		</view>
		<view class="title" style="margin: 50rpx 0; background-color: #f8f8f8; padding: 30rpx; border-radius: 10rpx;">
			<view class="main_title">{{day}}</view>
			<view class="title_detail">
				<text style="font-size: 30rpx; color: black;">{{theme}}</text>
				<text>浏览量:{{preview}}</text>
			</view>
		</view>
		<view class="title" style="margin: 50rpx 0; background-color: #f8f8f8; padding: 30rpx; border-radius: 10rpx;">
			<view class="main_title">{{day}}</view>
			<view class="title_detail">
				<text style="font-size: 30rpx; color: black;">{{theme}}</text>
				<text>浏览量:{{preview+152}}</text>
			</view>
		</view>
		<view class="title" style="margin: 50rpx 0; background-color: #f8f8f8; padding: 30rpx; border-radius: 10rpx;">
			<view class="main_title">{{day}}</view>
			<view class="title_detail">
				<text style="font-size: 30rpx; color: black;">{{theme}}</text>
				<text>浏览量:{{preview+55}}</text>
			</view>
		</view>
		
	</view>
</template>

<script>
	import {
		apiGetListDeatil
	} from '@/api/api_test.js'
	export default {
		data() {
			return {
				id: '',
				list: [],
				listImg:[],
				day:'',
				theme:'',
				preview:''
			}
		},
		onLoad(option) {
			console.log(option);
			this.id = option.id
		},
		methods: {
			async getListDeatil() {
				const res = await apiGetListDeatil({
					id: this.id
				});
				console.log(res);
				this.list = res.data[0]
				this.listImg = res.data[0].picList
				console.log(this.list.day);
				this.day=this.list.day
				this.theme=this.list.theme
				this.preview=this.list.preview
			}
		},
		mounted() {
			this.getListDeatil();
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 30rpx;
background: 
	linear-gradient(to bottom,#beecd8 20%,#F4E2D8);
	min-height: 100vh;
	}
	.swiper{
		width: 100vw;
		height: 50vh;
		.swiper-item{
			
			image{
				width: 90%;
				height: 90%;
				overflow: hidden;
			}
		}
		
	}
	.title{
		padding-top: 30rpx;
	}
	.main_title{
		font-size: 40rpx;
	}
	.title_detail{
		padding-top: 20rpx;
		display: flex;
		justify-content: space-between;
		font-size: 20rpx;
		color: gray;
	}
</style>